<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="css/layui.css" rel="stylesheet" type="text/css" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="maintenance">
          <h3 class="title-row"><span class="mainTitle"></span>
            <div id="option_btn">
              <button class="layui-btn layui-btn-sm add add-button-limit" type="button" style="float: right; margin: 10px;"
                data-method="add">
                <i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>
                添加
              </button>
              <button class="layui-btn layui-btn-sm delete delete-button-limit" type="button" style="float: right; margin: 10px;"
                data-method="delete">
                <i class="layui-icon layui-icon-delete layuiadmin-button-btn"></i>
                删除
              </button>
            </div>
          </h3>
          <div class="stateTable">
            <table class="layui-table" lay-skin="line" id="p_list" lay-filter="flowTableList"></table>
          </div>
          <script type="text/html" id="barDemo">
                  <!-- <a class="layui-btn layui-btn-sm" lay-event="sureBtn">确认</a> -->
                </script>
          <!-- <ul class="caller-contar"></ul> -->
        </div>
      </div>
    </div>
  </div>
  <script src="layui.js"></script>
  <script src="index.js"></script>
  <script>
    //一般直接写在一个js文件中
    var paramData
    layui.use(['layer', 'form', 'table', 'flowData'], function () {
      var layer = layui.layer
        , $ = layui.$
        , table = layui.table //表格
        , form = layui.form
        , flowData = layui.flowData
        ,element = layui.element;

      paramData = getFlowData();
      // console.log("parent: " + window.parent.location);
      // console.log("parentparent: " + window.parent.parent.location);
      $('.mainTitle').html(parent.checkTitle + "处理流程")

      // var paramData = {
      //   faultId: '777888',
      //   tag: '12'
      // };

      var addState = 0;
      //执行一个 table 实例
      function poTableRender(){

      table.render({
        elem: '#p_list'
        , height: 420
        , url: getIP()+'/FlowMajor/getFlowMajorStatu' //数据接口
        , where: paramData
        , skin: 'line'
        , id: 'flowTableList'
        , parseData: function (res) { //res 即为原始返回的数据
          if (res.code == 'success') {
            res.code = 0;
          }
          return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.total, //解析数据长度
            "data": res.rows //解析数据列表
          };
        }
        , cols: [[ //表头
          { field: 'answerTime', title: '预计完成时间', align: 'center', templet: generateTime }
          , { field: 'disposeTime', title: '实际完成时间', align: 'center', templet: generateConfirmTime }
          , { field: 'flowName', title: '流程', align: 'center', event: 'planRelated', templet: generateChildFlowEvent }
          , { field: 'right', title: '操作', align: 'center', width: 150, templet: generateToolBar }
        ]]
        , done: function (res, curr, count) {
          // console.log(res.count);
          if (res.count == 0) {
            $(".layui-table-main").html('<div class="layui-none">当前无此流程，如需加入请点击添加按钮</div>');
            $(".delete-button-limit").css("display", "none");
            $(".add-button-limit").css("display", "block");
          } else{
            $(".delete-button-limit").css("display", "block");
            $(".add-button-limit").css("display", "none");
          }
        }

      });

    }

    poTableRender();


      //确认按钮点击监听
      table.on('tool(flowTableList)', function (obj) {
        // var testData = window.parent.transmitData();
        // console.log(testData)

        var data = obj.data;
        if (obj.event === 'sure') {

          //参数组装
          let flowMajor = {
            faultId: paramData.faultId,
            tag: paramData.tag,
            answerTime: data.answerTime,
            flowLinkId: data.flowLinkId
          }

          flowProcess(flowMajor, obj);
        }
        if(obj.event === 'planRelated'){

          repairPlanListener(data,obj);

        }
      });

 


      //根据添加删除按钮属性以具体操作
      var active = {
        delete: function () {
          layer.open({
            type: 1
            , title: false //不显示标题栏
            , closeBtn: false
            , area: '300px;'
            , shade: 0.8
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['确认删除', '取消']
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: '<div style="padding: 50px; line-height: 40px; font-size: 20px;font-weight: 300;">是否确认删除此流程？</div>'
            , yes: function () {
              $.ajax({
                url: getIP()+'/flowLink/editMajor',
                type: 'post',
                data: { faultId: paramData.faultId, tag: paramData.tag, choice: "delete" },
                contentType: 'application/x-www-form-urlencoded',
                success: function (data) {
                  if (data.code == 'success') {
                    layer.msg(data.msg, { time: 900, icon: 6 }, function () {
                      parent.location.reload();
                    });//失败的表情5 成功的表情6
                    return;
                  } else {
                    layer.msg(data.msg, { icon: 5 });//失败的表情5 成功的表情6
                    return;
                  }
                },
                complete: function () {
                  // layer.close(this.layerIndex);
                  table.reload('flowTableList');
                },
              });
              window.parent.refreshAddFormData();
              layer.closeAll();
            }
          });
        }
        , add: function () {
          layer.open({
            type: 1
            , title: false //不显示标题栏
            , closeBtn: false
            , area: '300px;'
            , shade: 0.8
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['确认添加', '取消']
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: '<div style="padding: 50px; line-height: 40px; font-size: 20px;font-weight: 300;">是否确认添加此流程？</div>'
            , yes: function () {
              $.ajax({
                url: getIP()+'/flowLink/editMajor',
                type: 'post',
                data: { faultId: paramData.faultId, tag: paramData.tag, choice: "add",faultTime: paramData.faultTime},
                contentType: 'application/x-www-form-urlencoded',
                success: function (data) {
                  if (data.code == 'success') {
                    layer.msg(data.msg, { icon: 6 });//失败的表情5 成功的表情6
                    localStorage.setItem("addState", 1);
                    return;
                  }
                },
                complete: function () {
                  // layer.close(this.layerIndex);
                  table.reload('flowTableList');
                },
              });
              window.parent.refreshAddFormData();
              layer.closeAll();
            }
          });
        }

      };
      function getMajorIdByMajorName() {
        var majorConfig = window.parent.getMajorConfig();
        for (var i = 0; i < majorConfig.length; i++) {
          if (majorConfig[i].major == parent.checkTitle) {
            return majorConfig[i].major_v;
          }
        }
      }
      //监听 添加 删除按钮
      $('#option_btn .layui-btn').on('click', function () {
        var othis = $(this), method = othis.data('method');
        active[method] ? active[method].call(this, othis) : '';
      });


      //请求确认流程节点
      function flowProcess(flowMajor, obj) {
        $.ajax({
          url: getIP()+'/FlowMajor/updDisposeTimeAndStatu',
          type: 'post',
          data: flowMajor,
          contentType: 'application/x-www-form-urlencoded',
          success: function (data) {
            if (data.code == 'success') {
              layer.msg("当前节点已完成", { icon: 6 });//失败的表情5 成功的表情6
              poTableRender();
              flowNext(obj, data.currentDisAnsTime[0]);
              if (window.parent.currentName == "index") {
                // parent.location.reload();
                window.parent.renderIndexTable();
              }
              // if(data.faultStatu == "1"){
 
              //   window.parent.parent.renderTable();
              // }
              return;
            } else {
              layer.msg("当前节点更新失败", { icon: 5 });//失败的表情5 成功的表情6
              return;
            }
          },
          complete: function () {
            // layer.close(this.layerIndex);
            // table.reload('flowTableList');
          },
        });
      }

      // 流程执行确认后流程栏变色操作
      function flowNext(obj, timeData) {
        //确定按钮当前所在行
        index = obj.tr[0].attributes['data-index'].value;
        var currentElm = $("tr[data-index='" + index + "']");
        $(currentElm).find('a').css('display', 'none');
        $(currentElm).find('.p_content').css('color', 'black');
        $(currentElm).find('.p_time').css('color', 'black');
        $(currentElm).find('.p_contime').css('color', 'black');
        $(currentElm).find('.p_contime').html(timeData.currentDisposeTime + ' (' + timeData.disAnsDiff + ')');

        //确定按钮下一行
        index = parseInt(index, 10) + 1;
        var indexElm = $("tr[data-index='" + index + "']");
        $(indexElm).find('a').css('display', 'block');
        $(indexElm).find('.p_content').css('color', '#FF5722');

        //当前节点拥有状态 即可点开弹窗
        $(indexElm).find('.p_content').attr('re_statu', "1");
        

        $(indexElm).find('.p_time').css('color', '#FF5722');
        $(indexElm).find('.p_contime').css('color', '#FF5722');



      }


      function generateChildFlowEvent(data) {

        let styleColor = "";
        let html = "";
        switch (data.statu) {
          case 2:
            styleColor = 'style="color:#FF5722"'
            break;
          case 1:
            styleColor = 'style="color:black"'
            break;
          case 0:
            styleColor = 'style="color:grey"'
            break;
        }

        // if (data.flowLinkId == 6) {
        //   html = '<span id="re_plan" class="p_content layui-ctest"' + styleColor + '>' + data.flowName + ' <i class="layui-icon layui-icon-file-b"/></span>'
        // } else 
        
        if (data.LAY_INDEX == 1) {
          html = '<span class="p_content" style="color:black" >' + data.faultContent + ' </span>'
        } else {
          html = '<span class="p_content" re_statu="' + data.statu + '"' + styleColor + '>' + data.flowName + ' <i class="layui-icon layui-icon-file-b"/></span>'
        }
        return html

        // planHtml = 'id="re_plan" re_statu="' + data.statu + '"';
        //   icon = '<i class="layui-icon layui-icon-file-b"/>';
      }

      //维修计划监听
      function repairPlanListener(param,obj) {
        if(param.flowLinkId == 1){
          return;  
        }
        let statu = obj.tr.find(".p_content").attr("re_statu");
          if (statu != 0) {
            layer.open({
              type: 2
              , title: ['节点记录','color:#009688;line-height:50px;font-size:20px']
              , content: 'inputText.html'
              , area: ['90%', '90%']
              , success: function (layero, index) {
                var body=layer.getChildFrame('body',index);
                setValue("flowLinkId",param.flowLinkId);
                body[0].getElementsByClassName("title_contents")[0].innerText = param.flowName;
              },
            });
          }
      }


    });





  </script>
</body>

</html>